<template>
	<view class="foods_list">
		<view class="foods_item" v-for="(item,index) in foods" @longpress="showDeleteBtn">		
			<image :src="item.article.pictures[0].filePath" class="foods_image" @click="goFoodsDetail(item.foodArticleID)">
			</image>
			<view class="user_field">
				<view class="user_avatar">
					<image :src="user.avatarUrl" class="avatar_image"></image>
				</view>
				<i class="user_name">{{user.name}}</i>
			</view>
			<view class="praise_field">
				<praise :praiseNum="item.article.praiseNumber" :type="'Food'" :praiseid="item.foodArticleID"></praise>
			</view>
			<view class="foods_attributes">
				<b class="foods_name">{{item.food.name}}</b>
				<view class="foods_stars">
					<stars :light_num="item.food.index" :dark_num="5-item.food.index"></stars>
				</view>
				<view class="foods_tags">
					<tag :tagnum="item.food.labelObjects" ></tag>
				</view>
				<h class="foods_describe">{{item.food.reason}}</h>
				<button v-if="isDelete" class="delete_btn" @click="deleteItem(item.foodArticleID)">删除</button>
			</view> 
		</view>			
	</view>
</template>

<script>
	import stars from "../../../components/stars.vue"
	import tag from "../../../components/tag.vue"
	import praise from "../../../components/praise.vue"
	export default {
		components:{
			stars,
			tag,
			praise
		},
		data(){
			return{
				foods:[],
				user:{},
				isDelete:false
			}
		},
		methods:{
			showDeleteBtn(){

				this.isDelete=!this.isDelete
			},
			async getReleaseFood(uid){
				const res=await this.$myRequest({
					url:'/User/api/FoodArticles/id='+uid
				})				
				this.foods=res.data
				this.getusers()
			},
			goFoodsDetail(id){
				uni.navigateTo({
					url:'/pages/details/food-details/detail?id='+id
				})
				
			},
			deleteItem(id){
				var that=this
				uni.showModal({
				    title: '提示',
				    content: '是否删除该发布？',
				    success: function (res) {
				        if (res.confirm) {
				            that.deleteMyItem(id)
							uni.redirectTo({
								url:'/pages/user/user-done/index'
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			async deleteMyItem(id){
				const res=await this.$myRequest({
					url:'/FoodArticle/api/delete/id='+id
				})
			},
			async getusers(){				
				const userres=await this.$myRequest({
					url:'/User/api/find/id='+10001,
					
				})
				console.log(userres.data)
				this.user=userres.data
			}
		},
		created() {
			this.getReleaseFood(10001)

		}
	}
</script>

<style lang="less">
	.delete_btn{
		width:65px;
		height:35px;
		line-height: 30px;
		z-index: 999;
		margin-left: 45px;
		background-color: #DD524D;
		color:#FFFFFF;
		margin-top:10px;
		font-weight:600;
		position:fixed;
		
	}
	.foods_list{
		padding: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.foods_item{
			border-radius: 5%;
			border:1rpx solid #DCDFE6;
			background-color: #fff;
			margin-top:10px;
			width:345rpx;

			.foods_image{
				height:300rpx;
				width:100%;
				border-radius: 5%;	
				
			}
			.user_field{
				float:left;
				min-width: 70%;
				height:50rpx;
			
				.user_avatar{
					border:1px solid #eee;
					border-radius:50%;
					height:50rpx;
					width:50rpx;
					transform: translate(0,-50%);
					margin-right: 8px;
					float: left;
					.avatar_image{
						height: 100%;
			            width:100%;
	                    border-radius:50%;
		                background-color: #eee;
					}
				}
				.user_name{
					font-size: 12px;
					
				}
			}
			.praise_field{
				float:right;
				width:30%;
				
				height:50rpx;
			}
			.foods_attributes{
				margin-left:10rpx;
	
				.foods_name{
					display: inline-block;
					margin-right: 10rpx;
					float:left;
					font-size: 15px;
					font-weight: 600;
				}
				.foods_stars{
					
				}
				.foods_tags{
					margin-top: 15rpx;
				}
				.foods_describe{
					display: inline-block;
					margin-top: 15rpx;
					font-size:12px;
				}
			}
		}
	}
</style>
